import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import { Button, Modal, Form, Select, message } from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, layoutModel } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'

const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    dataSource: [],
    types: 1,
  }
  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 6)
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  handleSaveBtn = (values) => {
    this.setState({ initialValues: values })
    this.onChangeCurPageOrPageSize(1, 2)
  }
  getData = (current, pageSize) => {
    let data = {
      page_index: current,
      page_size: 9,
    }
    post('dashboard/student/examination/list', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        this.setState({ dataSource: res.data, total: res.size })
      }
    })
  }
  onChangeCurPageOrPageSize1 = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getDatacompleted(current, 2)
      }
    )
  }
  getDatacompleted = (current, pageSize) => {
    let data = {
      page_index: current,
      page_size: 2,
    }
    post('dashboard/student/homework/completed/list', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        // this.setState({ dataSource: res.data.concat(res.data).concat(res.data), total: res.size })
      }
    })
  }
  callback = (type) => () => {
    this.setState({
      types: type,
    })
    if (type == 1) {
      this.onChangeCurPageOrPageSize(1, 10)
    } else if (type == 2) {
      this.onChangeCurPageOrPageSize1(1, 10)
    }
  }
  wrt = (key, id) => {
    console.log(key, id)
    if (key == 1) {
      this.props.history.push(`/ClassroomTest/${id}`)
    } else {
      this.props.history.push(`/ClassroomTest/${id}`)
    }
  }
  pale = (index) => {
    if (index == 1) {
      if (this.state.current == 1) {
      } else {
        this.setState({ current: this.state.current - 1 })
        if (this.state.types == 1) {
          this.getData(this.state.current - 1, 6)
        } else {
          this.getDatacompleted(this.state.current - 1, 2)
        }
      }
    } else {
      if (Math.ceil(this.state.total / 6) > this.state.current) {
        this.setState({ current: this.state.current + 1 })
        if (this.state.types == 1) {
          this.getData(this.state.current + 1, 6)
        } else {
          this.getDatacompleted(this.state.current + 1, 2)
        }
      }
    }
  }
  render() {
    const { i18n } = this.props
    const { dataSource, types, dataSources } = this.state

    return (
      <div style={{ height: '88%' }}>
        <div style={{ position: 'relative', height: '100%' }}>
          <div
            style={{
              display: 'flex',
              width: '94%',
              justifyContent: 'center',
              zIndex: 5,
              position: 'relative',
              marginBottom: '70px',
              left: '3%',
              height: '100%',
            }}
          >
            <div style={{ width: '100%', height: '100%' }}>
              <img
                style={{
                  width: '100%',
                  height: '100%',
                }}
                alt=""
                src={require('../../imges/NL1.png')}
              />
            </div>
            <div style={{ width: '100%', height: '100%' }}>
              <img
                style={{
                  width: '100%',
                  height: '100%',
                }}
                alt=""
                src={require('../../imges/NL2.png')}
              />
            </div>
          </div>
          <div className="TopBuy">
            <img
              style={{
                width: '424px',
                height: '80px',
              }}
              alt=""
              src={require('../../imges/mc.png')}
            />
            <div className="zit1">课堂测试</div>
          </div>
          <div
            style={{
              position: 'absolute',
              top: '69px',
              width: '100%',
              zIndex: 5,
              height: '80%'
            }}
          >
            <div className="Nl11">
              {dataSource.map((item) => {
                return (
                  <div className="buhy22111">
                    <div className="Zuoye1111">
                      <div>
                        <div className="zy_title">{item.examination_name}</div>
                        <div className="zy_TEM">试题：{item.question_num}</div>
                      </div>
                      <div>
                        <div>
                          <img
                            style={{
                              width: '112px',
                              height: '36px',
                              cursor: 'pointer',
                            }}
                            alt=""
                            src={require('../../imges/kais.png')}
                            onClick={() => this.wrt(1, item.id)}
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
            <div
              style={{
                position: 'absolute',
                right: '20px',
                top: '50%',
                cursor: 'pointer',
                zIndex: 8,
              }}
            >
              <img
                onClick={() => this.pale(2)}
                style={{
                  width: '60px',
                  height: '60px',
                  cursor: 'pointer',
                  zIndex: 8,
                }}
                alt=""
                src={require('../../imges/le.png')}
              />
            </div>
            <div
              style={{
                position: 'absolute',
                left: '20px',
                top: '50%',
                cursor: 'pointer',
                zIndex: 8,
              }}
            >
              <img
                onClick={() => this.pale(1)}
                style={{
                  width: '60',
                  height: '60px',
                  cursor: 'pointer',
                  zIndex: 8,
                }}
                alt=""
                src={require('../../imges/re.png')}
              />
            </div>
          </div>
          <div className="dby">
            <div>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db11.png')}
              />
            </div>
            <div>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db12.png')}
              />
            </div>
          </div>
        </div>
        <div>
          <div
            style={{
              display: 'flex',
              position: 'absolute',
              bottom: '0px',
              width: '100%',
              zIndex: 8,
            }}
          >
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db2.png')}
              />
            </div>
            <div style={{ width: '60%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db3.png')}
              />
            </div>
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db1.png')}
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}
Command.propTypes = {}
export default Command
